<template>

  <el-card style="height: 820px; max-height: 820px;">
    <el-tabs v-model="activeName" @tab-click="handleClick" >

      <el-tab-pane label="固定任务" name="fixedTask">

        <el-alert title="说明" type="success" :closable="false"
                  description="固定任务一般是只未来某个时间要完成的某些事情，比如身份证过期换证提醒，XX天要去办某件事情。">
        </el-alert>
        <br/>

        <el-form :rules="fromPlanFixedTask" :model="fromPlan" label-width="180px">

          <el-form-item label="计划名称" prop="name" >
            <el-input v-model.trim="fromPlan.name"></el-input>
          </el-form-item>

          <el-form-item label="计划类型" >
            <el-input :disabled="true" placeholder="定时任务"></el-input>
          </el-form-item>

          <el-form-item label="重要性" prop="importance" >
            <el-select v-model="fromPlan.importance" placeholder="请选择重要性" >
              <el-option label="核心级" :value="0"></el-option>
              <el-option label="重要紧急" :value="1"></el-option>
              <el-option label="不重要但紧急" :value="2"></el-option>
              <el-option label="重要但不紧急" :value="3"></el-option>
              <el-option label="不重要不紧急" :value="4"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="计划执行时间" prop="startTime" >
          <span slot="label">
            <el-tooltip content="任务什么时候开始执行" placement="top" class="el-icon-color">
              <i class="el-icon-question"></i>
            </el-tooltip>
            计划执行时间
          </span>
            <el-date-picker
              clearable
              v-model="fromPlan.startTime"
              :picker-options="pickerOptions"
              placement="bottom-start"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="计划详情" prop="details" >
            <el-input v-model.trim="fromPlan.details" type="textarea"></el-input>
          </el-form-item>

          <el-form-item label="计划分类" prop="classify" >
            <el-select v-model="fromPlan.classify" placeholder="请选择计划分类" >
              <el-option label="个人" :value="1"></el-option>
              <el-option label="家庭" :value="2"></el-option>
              <el-option label="工作" :value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="提前多久提醒(天)" prop="advance" >
            <el-input-number v-model.trim="fromPlan.advance" :min="0" :max="366" :precision="0"></el-input-number>
          </el-form-item>

          <el-form-item>
            <el-button plain type="warning" @click="toSaveUpd(10)" >新增计划</el-button>
            <el-button @click="resetForm(10)">重置</el-button>
          </el-form-item>

        </el-form>

      </el-tab-pane>


      <el-tab-pane label="固定任务(精确到秒)" name="fixedTaskTime">

        <el-alert title="说明" type="success" :closable="false"
                  description="固定任务(精确到秒)是对固定任务的补充，这种需要精确到秒的任务，更多是近期一段时间要进行的任务，需要注意一点，因为当前设计问题，为了减少复杂度，
                秒级别的数据推送并没有完整实现，虽然并不是特别难做，但问题不大。故而现在的任务时间不会到秒级别，会有3分钟左右的误差范围。">
        </el-alert>
        <br/>

        <el-form :rules="fromPlanFixedTask" :model="fromPlan" label-width="180px">

          <el-form-item label="计划名称" prop="name" >
            <el-input v-model.trim="fromPlan.name"></el-input>
          </el-form-item>

          <el-form-item label="计划类型" >
            <el-input :disabled="true" placeholder="定时任务(精确到秒)"></el-input>
          </el-form-item>

          <el-form-item label="重要性" prop="importance" >
            <el-select v-model="fromPlan.importance" placeholder="请选择重要性" >
              <el-option label="核心级" :value="0"></el-option>
              <el-option label="重要紧急" :value="1"></el-option>
              <el-option label="不重要但紧急" :value="2"></el-option>
              <el-option label="重要但不紧急" :value="3"></el-option>
              <el-option label="不重要不紧急" :value="4"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="计划执行时间" prop="startTime" >
            <el-date-picker
              clearable
              v-model="fromPlan.startTime"
              :picker-options="pickerOptions"
              placement="bottom-start"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="计划详情" prop="details" >
            <el-input v-model.trim="fromPlan.details" type="textarea"></el-input>
          </el-form-item>

          <el-form-item label="计划分类" prop="classify" >
            <el-select v-model="fromPlan.classify" placeholder="请选择计划分类" >
              <el-option label="个人" :value="1"></el-option>
              <el-option label="家庭" :value="2"></el-option>
              <el-option label="工作" :value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="提前多久提醒(天)" prop="advance" >
            <el-input-number v-model.trim="fromPlan.advance" :min="0" :max="366" :precision="0"></el-input-number>
          </el-form-item>

          <el-form-item>
            <el-button plain type="warning" @click="toSaveUpd(11)" >新增计划</el-button>
            <el-button @click="resetForm(11)">重置</el-button>
          </el-form-item>

        </el-form>

      </el-tab-pane>


      <el-tab-pane label="循环任务(年)" name="loopTaskYear">
        <el-form :rules="fromPlanFixedTask" :model="fromPlan" label-width="180px">

          <el-alert title="说明" type="success" :closable="false"
                    description="一年循环一次的任务">
          </el-alert>
          <br/>

          <el-form-item label="计划名称" prop="name" >
            <el-input v-model.trim="fromPlan.name"></el-input>
          </el-form-item>

          <el-form-item label="计划类型" >
            <el-input :disabled="true" placeholder="循环任务(年)"></el-input>
          </el-form-item>

          <el-row>
            <el-col :span="7">
              <el-form-item label="执行周期(年)"  >
                <el-input-number v-model.trim="fromPlan.cycle" @change="handleChange(10)" :min="1" :precision="0"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="17">
              <p class="text-color">备注：默认1，表示每一年执行一次</p>
            </el-col>
          </el-row>


          <el-form-item label="重要性" prop="importance" >
            <el-select v-model="fromPlan.importance" placeholder="请选择重要性" >
              <el-option label="核心级" :value="0"></el-option>
              <el-option label="重要紧急" :value="1"></el-option>
              <el-option label="不重要但紧急" :value="2"></el-option>
              <el-option label="重要但不紧急" :value="3"></el-option>
              <el-option label="不重要不紧急" :value="4"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="开始时间时间" prop="startTime" >
            <el-date-picker
              clearable
              v-model="fromPlan.startTime"
              placement="bottom-start"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="停止任务时间" prop="endTime" >
            <el-date-picker
              clearable
              v-model="fromPlan.endTime"
              placement="bottom-start"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="计划详情" prop="details" >
            <el-input v-model.trim="fromPlan.details" type="textarea"></el-input>
          </el-form-item>

          <el-form-item label="计划分类" prop="classify" >
            <el-select v-model="fromPlan.classify" placeholder="请选择计划分类" >
              <el-option label="个人" :value="1"></el-option>
              <el-option label="家庭" :value="2"></el-option>
              <el-option label="工作" :value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="提前多久提醒(天)" prop="advance" >
            <el-input-number v-model.trim="fromPlan.advance" :min="0" :max="366" :precision="0"></el-input-number>
          </el-form-item>

          <el-form-item>
            <el-button plain type="warning" @click="toSaveUpd(20)" >新增计划</el-button>
            <el-button @click="resetForm(20)">重置</el-button>
          </el-form-item>

        </el-form>
      </el-tab-pane>


      <el-tab-pane label="循环任务(月)" name="loopTaskMonth">
        <el-form :rules="fromPlanFixedTask" :model="fromPlan" label-width="180px">

          <el-alert title="说明" type="success" :closable="false"
                    description="按照月循环的任务">
          </el-alert>
          <br/>

          <el-form-item label="计划名称" prop="name" >
            <el-input v-model.trim="fromPlan.name"></el-input>
          </el-form-item>

          <el-form-item label="计划类型" >
            <el-input :disabled="true" placeholder="循环任务(月)"></el-input>
          </el-form-item>

          <el-row>
            <el-col :span="7">
              <el-form-item label="执行周期(月)"  >
                <el-input-number v-model.trim="fromPlan.cycle" :min="1" @change="handleChange(11)" :precision="0"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="17">
              <p class="text-color">备注：默认1，表示每一个月执行一次</p>
            </el-col>
          </el-row>

          <el-form-item label="重要性" prop="importance" >
            <el-select v-model="fromPlan.importance" placeholder="请选择重要性" >
              <el-option label="核心级" :value="0"></el-option>
              <el-option label="重要紧急" :value="1"></el-option>
              <el-option label="不重要但紧急" :value="2"></el-option>
              <el-option label="重要但不紧急" :value="3"></el-option>
              <el-option label="不重要不紧急" :value="4"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="开始时间时间" prop="startTime" >
            <el-date-picker
              clearable
              v-model="fromPlan.startTime"
              placement="bottom-start"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="停止任务时间" prop="endTime" >
            <el-date-picker
              clearable
              v-model="fromPlan.endTime"
              placement="bottom-start"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="计划详情" prop="details" >
            <el-input v-model.trim="fromPlan.details" type="textarea"></el-input>
          </el-form-item>

          <el-form-item label="计划分类" prop="classify" >
            <el-select v-model="fromPlan.classify" placeholder="请选择计划分类" >
              <el-option label="个人" :value="1"></el-option>
              <el-option label="家庭" :value="2"></el-option>
              <el-option label="工作" :value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="提前多久提醒(天)" prop="advance" >
            <el-input-number v-model.trim="fromPlan.advance" :min="0" :max="28" :precision="0"></el-input-number>
          </el-form-item>

          <el-form-item>
            <el-button plain type="warning" @click="toSaveUpd(21)" >新增计划</el-button>
            <el-button @click="resetForm(21)">重置</el-button>
          </el-form-item>

        </el-form>
      </el-tab-pane>


      <el-tab-pane label="循环任务(天)" name="loopTaskDay">
        <el-form :rules="fromPlanFixedTask" :model="fromPlan" label-width="180px">

          <el-alert title="说明" type="success" :closable="false"
                    description="按照天级别的任务循环">
          </el-alert>
          <br/>

          <el-form-item label="计划名称" prop="name" >
            <el-input v-model.trim="fromPlan.name"></el-input>
          </el-form-item>

          <el-form-item label="计划类型" >
            <el-input :disabled="true" placeholder="循环任务(天)"></el-input>
          </el-form-item>

          <el-row>
            <el-col :span="7">
              <el-form-item label="执行周期(天)"  >
                <el-input-number v-model.trim="fromPlan.cycle" :min="1" @change="handleChange(30)" :precision="0"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="17">
              <p class="text-color">备注：默认1，表示每一天执行一次</p>
            </el-col>
          </el-row>

          <el-form-item label="重要性" prop="importance" >
            <el-select v-model="fromPlan.importance" placeholder="请选择重要性" >
              <el-option label="核心级" :value="0"></el-option>
              <el-option label="重要紧急" :value="1"></el-option>
              <el-option label="不重要但紧急" :value="2"></el-option>
              <el-option label="重要但不紧急" :value="3"></el-option>
              <el-option label="不重要不紧急" :value="4"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="开始时间时间" prop="startTime" >
            <el-date-picker
              clearable
              v-model="fromPlan.startTime"
              placement="bottom-start"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="停止任务时间" prop="endTime" >
            <el-date-picker
              clearable
              v-model="fromPlan.endTime"
              placement="bottom-start"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="计划详情" prop="details" >
            <el-input v-model.trim="fromPlan.details" type="textarea"></el-input>
          </el-form-item>

          <el-form-item label="计划分类" prop="classify" >
            <el-select v-model="fromPlan.classify" placeholder="请选择计划分类" >
              <el-option label="个人" :value="1"></el-option>
              <el-option label="家庭" :value="2"></el-option>
              <el-option label="工作" :value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button plain type="warning" @click="toSaveUpd(22)" >新增计划</el-button>
            <el-button @click="resetForm(22)">重置</el-button>
          </el-form-item>

        </el-form>
      </el-tab-pane>


      <el-tab-pane label="循环任务(小时)" name="loopTaskHour">
        <el-form :rules="fromPlanFixedTask" :model="fromPlan" label-width="180px">

          <el-alert title="说明" type="success" :closable="false"
                    description="按照小时的任务循环">
          </el-alert>
          <br/>

          <el-form-item label="计划名称" prop="name" >
            <el-input v-model.trim="fromPlan.name"></el-input>
          </el-form-item>

          <el-form-item label="计划类型" >
            <el-input :disabled="true" placeholder="循环任务(小时)"></el-input>
          </el-form-item>

          <el-row>
            <el-col :span="7">
              <el-form-item label="执行周期(小时)"  >
                <el-input-number v-model.trim="fromPlan.cycle" :min="1" @change="handleChange(24)" :precision="0"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="17">
              <p class="text-color">备注：默认1，表示每一小时执行一次</p>
            </el-col>
          </el-row>

          <el-form-item label="重要性" prop="importance" >
            <el-select v-model="fromPlan.importance" placeholder="请选择重要性" >
              <el-option label="核心级" :value="0"></el-option>
              <el-option label="重要紧急" :value="1"></el-option>
              <el-option label="不重要但紧急" :value="2"></el-option>
              <el-option label="重要但不紧急" :value="3"></el-option>
              <el-option label="不重要不紧急" :value="4"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="开始执行时间" prop="startTime" >
            <el-date-picker
              clearable
              v-model="fromPlan.startTime"
              placement="bottom-start"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="停止任务时间" prop="endTime" >
            <el-date-picker
              clearable
              v-model="fromPlan.endTime"
              placement="bottom-start"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="计划详情" prop="details" >
            <el-input v-model.trim="fromPlan.details" type="textarea"></el-input>
          </el-form-item>

          <el-form-item label="计划分类" prop="classify" >
            <el-select v-model="fromPlan.classify" placeholder="请选择计划分类" >
              <el-option label="个人" :value="1"></el-option>
              <el-option label="家庭" :value="2"></el-option>
              <el-option label="工作" :value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button plain type="warning" @click="toSaveUpd(23)" >新增计划</el-button>
            <el-button @click="resetForm(23)">重置</el-button>
          </el-form-item>

        </el-form>
      </el-tab-pane>
    </el-tabs>

  </el-card>

</template>

<script>

  import http from '@/utils/http'
  import {clearInvalid} from "../../utils/utils"

  export default {
    name: "PlanSaveUpd",
    data(){
      return {
        activeName: 'fixedTask',
        // 不能超过今天之前的时间
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        // 要提交数据
        fromPlan: {
          name: null,
          type: null,
          cycle: 1,
          importance: null,
          startTime: null,
          endTime: null,
          details: null,
          classify: null,
          advance: 0,
        },
        // 固定任务校验
        fromPlanFixedTask: {
          name: [{ required: true, message: '请输入计划名称', trigger: 'blur' }],
          startTime: [{ required: true, message: '请选择计划执行时间', trigger: 'blur' }],
          // importance: [{ required: true, message: '请选择账单类型', trigger: 'change' }],
        },
      }
    },
    methods: {
      /**
       * 初始化
       */
      init(){
        this.fromPlan = {
          name: null,
          type: null,
          cycle: 1,
          importance: null,
          startTime: null,
          endTime: null,
          details: null,
          classify: null,
          advance: 0,
        }
      },
      /**
       * 检查周期是否有问题
       * @param value 要检查的数据
       */
      handleChange(value){
        if (this.fromPlan.cycle > value){
          this.$message.success("执行周期不能超过" + value);
          this.fromPlan.cycle = value
        }
      },
      /**
       * 切换按钮被点击
       * @param tab 标签页数据
       * @param event 事件，一般是 click
       */
      handleClick(tab, event){
        this.init()
        let name = tab.name
        if (name === 'fixedTask'){
          // 固定
          this.fromPlan.type = 10

        } else if (name === 'fixedTaskTime'){
          // 固定时间到秒
          this.fromPlan.type = 11

        } else if (name === 'loopTaskYear'){
          // 循环年
          this.fromPlan.type = 20

        } else if (name === 'loopTaskMonth'){
          // 循环月
          this.fromPlan.type = 21

        } else if (name === 'loopTaskDay'){
          // 循环天
          this.fromPlan.type = 22

        } else if (name === 'loopTaskHour'){
          // 循环小时
          this.fromPlan.type = 23

        } else {
        }
      },
      /**
       * 保存计划
       */
      toSaveUpd(type){
        http.post("/plan/savePlan", this.fromPlan).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.resetForm(type)
          this.$message.success("保存成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 重置表单
       * @param type 计划类型
       */
      resetForm(type){
        this.init()
        this.fromPlan.type = type
      },
    },
    mounted(){
      this.init()
      // 默认选择固定任务
      this.fromPlan.type = 10
    }
  }
</script>

<style scoped>

  .text-color {
    color: red;
  }

  .el-icon-color {
    color: #E6A23C;
  }

</style>
